@charset "UTF-8";
/**
 * 
 * @authors 3pixel (kermit@piexl.net)
 * @date    2017-11-22 11:47:01
 * @version v0.0.1
 */

//引入变量
@import "variable.less";

//引入混合函数
@import "mixins.less";

.header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background-color:rgba(0, 0, 0, 0);
	z-index:999;
	.box-sizing(border-box);
	padding:24px 40px 0 40px;
	@media screen and (max-width:1366px){padding-left:30px; padding-right:30px;}
	@media screen and (max-width:1280px){padding-left:25px; padding-right:25px;}
	a{
		color:rgba(255, 255, 255, 0.9);
		&:hover{
			color:rgba(255, 255, 255, 1);
		}
	}
	.logo{
		margin-right:36px;
		line-height:0;
		font-size:0;
		@media screen and (max-width:1680px){margin-right:30px;}
		@media screen and (max-width:1366px){margin-right:20px;}
		@media screen and (max-width:1280px){margin-right:10px;}
	}
	.logo-white{display:block;}
	.logo-blank{display:none;}
	.menu{
		font-size:18px;
		line-height:43px;
		.menu-item{
			float:left;
			a{
				padding:0 1.5em;
				@media screen and (max-width:1680px){padding-left:1.2em;padding-right:1.2em;}
				@media screen and (max-width:1440px){padding-left:1.1em;padding-right:1.1em;}
				@media screen and (max-width:1366px){padding-left:1em;padding-right:1em;}
				@media screen and (max-width:1280px){padding-left:0.5em;padding-right:0.5em;}
				@media screen and (max-width:1024px){padding-left:0.5em;padding-right:0.5em;}
				&:hover{
					color:@red;
					text-decoration:none;
				}
			}
			&.menu-item-active{
				a{
					color:@red;
					text-decoration:none;
				}
			}
		}
	}
	.left-bar{
		.clearfix();
	}
	.right-bar{
		@rowHeight:32px;
		color:#ddd;
		.links{
			float:left;
			padding-top:4px;
			padding-bottom:4px;
		}
		.line{
			float:left;
			margin:0 0.8em;
			font-size:16px;
			line-height:@rowHeight;
		}
		a{
			display:block;
			float:left;
			line-height:@rowHeight;
			float:left;
			&:hover{
				color:#fff;
				text-decoration:none;
			}
		}
		.link{
			float:left;
			font-size:16px;
			i{
				font-size:18px;
				line-height:@rowHeight;
				padding-right:0.5em;
				float:left;
			}
		}
		.incon-link{
			width:@rowHeight;
			height:@rowHeight;
			padding:6px;
			margin:0 3px;
			line-height:1;
			.box-sizing(border-box);
			text-align:center;
			background-color:#c4c3c2;
			color:#6c6c6b;
			float:left;
			&.incon-link-first{margin-left:0;}
			i{
				font-size:20px;
				line-height:1;
			}
			.border-radius(50%);
			&:hover{
				background-color:#fff;
				color:#000;
			}
		}
		.incon-link-search{
			width:@rowHeight+4px;
			height:@rowHeight+4px;
			margin-right:0;
			background-color:#535353;
			color:#fff;
			display:none;
			cursor:pointer;
			i{font-size:24px;}
		}
		.incon-link-menu{
			display:none;
			cursor:pointer;
		}
		.search-area{
			float:left;
			margin-left:0.8em;
			@media screen and (max-width:1480px){
				@lineHeight:40px;
				position:relative;
				margin-left:0;
				padding-top:2px;
				padding-bottom:2px;
				.incon-link-search{display:block;}
				.search-box{
					display:none;
					width:301px;
					position:absolute;
					top:-1px;
					right:-1px;
					.search{input{width:126px;}}
				}
				&:hover{
					.search-box{
						display:block;
					}
				}
			}
		}
		.search-box{
			@lineHeight:40px;
			line-height:@lineHeight;
			float:left;
			.border-radius(@lineHeight);
			.search{
				background-color:#fff;
				border-top-left-radius:@lineHeight/2;
				border-bottom-left-radius:@lineHeight/2;
				padding-left:5px;
				padding-right:5px;
				border:1px solid #b8b7b7;
				i{
					padding:@lineHeight/5 5px;
					font-size:@lineHeight*3/5;
					line-height:1;
					color:#000;
					float:left;
				}
				input{
					float:left;
					border:0;
					outline:0;
					font-size:16px;
					width:140px;
					height:@lineHeight;
					line-height:@lineHeight;
				}
			}
			.btn-group{
				.btn{
					border:0;
					cursor:pointer;
					line-height:@lineHeight+2px;
					padding:0 0.8em;
					background-color:#595959;
					float:left;
					.border-radius(0);
					color:#fff;
					&:hover{
						background-color:@red;
					}
					&:first-child{
						position:relative;
						&::after{
							position:absolute;
							right:0;
							top:50%;
							content:'';
							margin-top:-0.6em;
							display:block;
							width:1px;
							height:1.2em;
							background-color:#737373;
						}
					}
					&:last-child{
						border-top-right-radius:@lineHeight/2+1px;
						border-bottom-right-radius:@lineHeight/2+1px;
					}
				}
			}
		}
	}
	&.header-white{
		background-color:rgba(255, 255, 255, 0.5);
		background-color:#ffffff;
		padding-bottom:24px;
		border-bottom:1px solid #e7e7e7;
		.logo-white{display:none;}
		.logo-blank{display:block;}
		a{
			color:#000;
		}
		.right-bar{
			a{
				color:#7f7f7f;
				&:hover{
					color:#000;
				}
			}
			.incon-link{
				color:#fff;
				background-color:#b2b2b2;
				&:hover{
					color:#fff;
					background-color:@red;
				}
			}
			.incon-link-search{
				color:#fff;
				background-color:#535353;
				&:hover{
					background-color:@red;
				}
			}
			.incon-link-menu{
				color:#000;
				background-color:transparent;
				&:hover{
					color:@red;
					background-color:transparent;
				}
			}
			// .incon-link-search{
			// 	margin-right:0;
			// 	background-color:#535353;
			// 	color:#fff;
			// 	display:none;
			// 	cursor:pointer;
			// }
		}
	}
}

@media screen and (max-width:1024px){
.header{
	padding:10px 20px;
	.menu{}
	.right-bar{padding:1.5px 0;}
	.right-bar{
		@rowHeight:30px;
		.links{display:none;}
		.line{
			float:left;
			margin:0 0.8em;
			font-size:16px;
			line-height:@rowHeight;
		}
		a{
			display:block;
			float:left;
			line-height:@rowHeight;
			float:left;
			&:hover{
				color:#fff;
				text-decoration:none;
			}
		}
		.link{
			float:left;
			font-size:16px;
			i{
				font-size:18px;
				line-height:@rowHeight;
				padding-right:0.5em;
				float:left;
			}
		}
		.incon-link{
			width:@rowHeight;
			height:@rowHeight;
			i{font-size:18px;}
		}
		.incon-link-search{
			padding:0;
			i{font-size:30px;}
			background-color:transparent;
		}
		//.incon-link-menu{margin-top:4px; display:block;}
		.search-area{
			.search-box{
				@lineHeight:36px;
				width:288px;
				right:-1px;
				line-height:@lineHeight;
				.border-radius(@lineHeight);
				.search{
					border-top-left-radius:@lineHeight/2;
					border-bottom-left-radius:@lineHeight/2;
					i{
						padding:@lineHeight/5 5px;
						font-size:@lineHeight*3/5;
					}
					input{
						line-height:@lineHeight;
						height:@lineHeight;
					}
				}
				.btn-group{
					.btn{
						line-height:@lineHeight+2px;
						padding:0 0.6em;
						&:last-child{
							border-top-right-radius:@lineHeight/2+1px;
							border-bottom-right-radius:@lineHeight/2+1px;
						}
					}
				}
			}
		}
	}
	&.header-white{
		padding-bottom:10px;
		.right-bar{
			.incon-link-search{
				color:#333;
				background-color:transparent;
				&:hover{
					color:@red;
					background-color:transparent;
				}
			}
		}
	}
}

}

@media screen and (max-width:768px){
.header{
	padding:15*@rpx 20*@rpx;
	.logo{width:258*@rpx;}
	.menu{display:none;}
	.left-bar{padding-top:0;}
	.right-bar{
		padding:0;
		.links{
			display:none;
		}
		.search-area{
			display:none;
		}
		.incon-link-menu{
			display:block;
			padding:0;
			margin:0;
			line-height:1;
			i{font-size:58*@rpx;}
			color:#fff;
			background-color:transparent;
		}
	}
	&.header-white{
		padding-bottom:15*@rpx;
	}
}

}

//手机版导航
.cover-menu{
	display:none;
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-color:#fff;
	z-index:999;
	width:100%;
	height:100%;
	//padding:40*@rpx 0;
	&.cover-menu-show{display:none;}
	@media screen and (max-width: 768px){
		&.cover-menu-show{display:block;}
	}
	.btn-close{
		padding:25*@rpx;
		border:0;
		background-color:@red;
		color:#fff;
		i{font-size:46*@rpx; width:1em; line-height:1;}
	}
	.btn-group{
		padding:1em 0;
		color:#a7a7a7;
		.btn{
			border:0;
			background-color:transparent;
			padding:0.3em 1em;
			font-size:14px;
			color:#a7a7a7;
			outline:none;
			&.btn-active{
				color:@red;
				font-weight:bold;
			}
		}
	}
	.search-box{
		position:relative;
		padding:0 64*@rpx;
		@height:90*@rpx;
		.search{
			border:1px solid #cecece;
			height:@height;
			.border-radius(@height/2);
			overflow:hidden;
			display:flex;
			i{
				display:inline-block;
				width:@height;
				height:@height;
				line-height:@height;
				text-align:center;
				font-size:40*@rpx;
			}
			input{
				width:100%;
				flex:1;
				height:@height;
				border:0;
				padding-right:0.5em;
				background-color:transparent;
				outline:0;
				font-size:16px;
			}
		}
		.search-btn{
			border:0;
			line-height:@height;
			padding:0 40*@rpx;
			font-size:16px;
			background-color:#cecece;
			&:hover{
				color:#fff;
				background-color:@red;
			}
		}
	}
	.menu-header{
	}
	.menu-body{
		padding:50*@rpx 0;
		.menu{
			.menu-item{
				a{
					color:#2c2626;
					font-size:16px;
					font-weight:bold;
					display:block;
					padding:20*@rpx 0;
					padding-left:90*@rpx;
					position:relative;
					&:before{
						display:none;
						content:'';
						position:absolute;
						top:50%;
						left:0;
						margin-top:-1px;
						width:40*@rpx;
						height:2px;
						background-color:@red;
					}
				}
				&.menu-item-active{
					a{
						color:@red;
						&:before{display:block;}
					}
				}
			}
		}
	}
	.menu-footer{
		.links{
			@lineHeight:40*@rpx;
			margin-bottom:20*@rpx;
			font-size:30*@rpx;
			.links-inner{
				display:inline-block;
			}
			.line{color:#999; float:left; padding:0 0.5em;}
			a{
				font-size:14px;
				color:#999;
				line-height:@lineHeight;
				i{font-size:@lineHeight;}
				float:left;
			}
		}
		.social-box{
			.social-link{border-color:#b2b2b2; color:#b2b2b2;}
		}
		.wechat-box .qrcode-box{
			border:1px solid @red;
			&:before{
				border-top-color:@red;
			}
		}
	}
}
